<template>
    <div id="updatePwd">
        <MipLightbox>
            <template v-slot:slot1>
                <el-button type="primary" class="modelfy_row updatePwd" @click="dialogFormVisible = true">修改密码
                </el-button>

                <!-- Form -->
                <el-dialog title="修改密码" :visible.sync="dialogFormVisible" width="35%">
                    <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
                        <el-form-item label="旧密码" :label-width="formLabelWidth" prop="oldPwd">
                            <el-input v-model="ruleForm.oldPwd" placeholder="请输入旧密码" autocomplete="off"
                                      class="oldPassInput" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="新密码" :label-width="formLabelWidth" prop="newPwd">
                            <el-input v-model="ruleForm.newPwd" placeholder="请输入新密码" autocomplete="off"
                                      class="newPassInput" show-password></el-input>
                        </el-form-item>
                        <el-form-item label="确认密码" :label-width="formLabelWidth" prop="checkPass">
                            <el-input v-model="ruleForm.checkPass" placeholder="请输入确认密码" autocomplete="off"
                                      class="checkPassInput" show-password></el-input>
                        </el-form-item>
                    </el-form>
                    <div slot="footer" class="dialog-footer">
                        <el-button type="primary" @click.prevent="onSubmit('ruleForm')">确 定</el-button>
                        <el-button @click="dialogFormVisible = false">取 消</el-button>
                    </div>
                </el-dialog>
            </template>
        </MipLightbox>
    </div>
</template>

<script>

    import {Button, Dialog, Form, FormItem, Input, MessageBox} from "element-ui"
    import MipLightbox from "../../../../../components/miplightbox/MipLightbox";
    import {post} from "../../../../../request/AxiosMAX";

    export default {
        name: "UpdatePwd",
        data() {
            var validatePass2 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请输入新密码'));
                } else if (value == this.ruleForm.oldPwd) {
                    callback(new Error('新密码不能与旧密码相同'));
                } else {
                    callback();
                }
            };
            var validatePass3 = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('请再次输入密码'));
                } else if (value !== this.ruleForm.newPwd) {
                    callback(new Error('两次输入密码不一致!'));
                } else {
                    callback();
                }
            }
            return {
                dialogFormVisible: false,
                formLabelWidth: '120px',
                title: '修改密码',
                ruleForm: {
                    oldPwd: '',
                    newPwd: '',
                    checkPass: ''
                },
                rules: {
                    oldPwd: [
                        {required: true, message: '请输入旧密码', trigger: 'blur'},
                        {min:6,max:20,message:'密码长度为6 - 18个字符',trigger:'change'}
                    ],
                    newPwd: [
                        {required: true, validator: validatePass2, trigger: 'blur'},
                        {min:6,max:20,message:'密码长度为6 - 18个字符',trigger:'change'}
                    ],
                    checkPass: [
                        {required: true, validator: validatePass3, trigger: 'blur'},
                        {min:6,max:20,message:'密码长度为6 - 18个字符',trigger:'change'}
                    ]
                }
            }
        },
        components: {
            MipLightbox,
            "el-button": Button,
            "el-dialog": Dialog,
            "el-form": Form,
            "el-form-item": FormItem,
            "el-input": Input
        },
        methods: {
            onSubmit(formName) {
                MessageBox.confirm('修改密码需要重新登录, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$refs[formName].validate((valid) => {
                        if (valid) {
                            // 发送post请求
                            let user = {
                                id:this.$store.state.user.id,
                                oldPwd:this.ruleForm.oldPwd,
                                newPwd:this.ruleForm.newPwd
                            };
                            post("/api/Studies_to_travel/BaseRegister/updateByIdAndOldPwd",user)
                                .then(res => {
                                    if (res.code === 0) {
                                        //清楚表单数据
                                        this.$refs[formName].resetFields();
                                        this.dialogFormVisible = false;
                                        this.$message({
                                            message: '提交成功~',
                                            type: 'success'
                                        });
                                        //清空本地缓存
                                        localStorage.clear();
                                        //重新登录
                                        this.$router.push("/login");
                                    } else {
                                        this.$message({
                                            message: '提交失败~',
                                            type: 'error'
                                        });
                                    }
                                }).catch(err => {
                                console.info(err);
                                this.$message({
                                    message: '网络错误~',
                                    type: 'error'
                                });
                            })
                        }
                    })
                })

            }
        }
    }
</script>

<style scoped>

    .modelfy_row {
        width: 280px;
        margin: 1% 0% 1% 6%;
    }

</style>
